<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[32, 16]">
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="10">
      <nz-card class="m-b-10" nzSize="default" nzTitle="BasicButton Color">
        <div class="title">success</div>
        <button class="success" nz-button>成功</button>
        <button disabled nz-button nzType="default">禁用</button>
        <button class="success" nz-button nzLoading nzType="default">loading</button>
        <a nz-button nzType="link" style="color: #55d187">link</a>
        <a nz-button nzLoading nzType="link" style="color: #55d187">loading link</a>
        <a disabled nz-button nzType="link">disabled link</a>

        <div class="title">warning</div>
        <button class="warning" nz-button>成功</button>
        <button disabled nz-button nzType="default">禁用</button>
        <button class="warning" nz-button nzLoading nzType="default">loading</button>
        <a nz-button nzType="link" style="color: #efbd47">link</a>
        <a nz-button nzLoading nzType="link" style="color: #efbd47">loading link</a>
        <a disabled nz-button nzType="link">disabled link</a>

        <div class="title">error</div>
        <button nz-button nzDanger nzType="primary">成功</button>
        <button disabled nz-button nzType="default">禁用</button>
        <button nz-button nzDanger nzLoading nzType="primary">loading</button>
        <a nz-button nzType="link" style="color: #ed6f6f">link</a>
        <a nz-button nzLoading nzType="link" style="color: #ed6f6f">loading link</a>
        <a disabled nz-button nzType="link">disabled link</a>

        <div class="title">ghost</div>
        <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #55d187; border-color: #55d187">幽灵成功</button>
        <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #efbd47; border-color: #efbd47">幽灵警告</button>
        <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #ed6f6f; border-color: #ed6f6f">幽灵错误</button>
        <button class="m-b-8" disabled nz-button nzGhost nzType="dashed" style="color: #efbd47; border-color: #efbd47">幽灵警告disabled</button>
        <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #ed6f6f; border-color: #ed6f6f">幽灵危险</button>
      </nz-card>
    </div>
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="16" [nzXs]="24" [nzXXl]="14">
      <nz-card class="m-b-10" nzSize="default" nzTitle="BasicButton Types">
        <div class="title">primary</div>
        <button class="m-b-8" nz-button style="color: #ffffff; border-color: #0960bd; background-color: #0960bd">
          <i nz-icon nzTheme="outline" nzType="menu-unfold"></i>
          主按钮
        </button>
        <button class="m-b-8" disabled nz-button nzType="default">禁用</button>
        <button class="m-b-8" nz-button nzDanger nzType="primary">
          <i nz-icon nzTheme="outline" nzType="menu-unfold"></i>
          危险
        </button>
        <button class="m-b-8" nz-button nzLoading nzType="primary">loading</button>
        <a class="m-b-8" nz-button nzType="link">link</a>
        <a class="m-b-8" nz-button nzLoading nzType="link">loading link</a>
        <a class="m-b-8" disabled nz-button nzType="link">disabled link</a>

        <div class="title">default</div>
        <button class="m-b-8" nz-button>默认</button>
        <button class="m-b-8" disabled nz-button nzType="default">禁用</button>
        <button class="m-b-8" nz-button nzType="default" style="color: red; border-color: red">危险</button>
        <button class="m-b-8" nz-button nzLoading>loading</button>
        <a class="m-b-8" nz-button nzType="link">link</a>
        <a class="m-b-8" nz-button nzLoading nzType="link">loading link</a>
        <a class="m-b-8" disabled nz-button nzType="link">disabled link</a>

        <div class="title">dashed</div>
        <button class="m-b-8" nz-button nzType="dashed">dashed</button>
        <button class="m-b-8" disabled nz-button nzType="dashed">禁用</button>
        <button class="m-b-8" nz-button nzType="dashed" style="color: red; border-color: red">危险</button>
        <button class="m-b-8" nz-button nzLoading nzType="dashed">loading</button>

        <div class="title">ghost 常规幽灵按钮通常用于有色背景下</div>
        <div class="ghost-border p-t-8 p-b-8 p-l-8">
          <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #0960bd; border-color: #0960bd">幽灵主要</button>
          <button class="m-b-8" nz-button nzGhost nzType="default" style="color: #fff; border-color: #fff">幽灵默认</button>
          <button class="m-b-8" nz-button nzGhost nzType="dashed">幽灵disabled</button>
          <button class="m-b-8" nz-button nzGhost nzType="default">禁用</button>
          <button class="m-b-8" nz-button nzGhost nzLoading nzType="default">loading</button>
        </div>
      </nz-card>
    </div>
  </div>
</div>
